<template>
    <el-dialog
    :visible.sync="isShowDialog"
    :open="openDialog"
    :close="handleClose"
    :title="isFlag?'新增':'编辑'"
    width="50%"
    :close-on-click-modal="false">
        <el-form
            ref="customerInfoRef"
            :model="customerInfoForm"
            label-width="100px"
            :rules="rules">
            <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="customerInfoForm.companyName" placeholder="请输入公司名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="公司地址" prop="companyAddress">
                <el-input v-model="customerInfoForm.companyAddress" placeholder="请输入公司地址" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名" prop="contactName">
                <el-input v-model="customerInfoForm.contactName" placeholder="请输入联系人姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系人电话" prop="contactPhone">
                <el-input v-model.number="customerInfoForm.contactPhone" placeholder="请输入联系人电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="申请时间" prop="applyDate">
                <el-date-picker
                style="width: 100%"
                clearable
                v-model="customerInfoForm.applyDate"
                type="date"
                placeholder="请选择申请时间">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
/**
* @description: 新增编辑
* @create: 2020-09-01
* @author: niuwenli
*/
export default {
    name: 'customerOperate',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        // 新增还是编辑
        flag: {
            type: Boolean,
            default: false
        },
        // 编辑数据
        updateData: {
            type: Object,
            default: () => {}
        }
    },
    components: {},
    data () {
        return {
            customerInfoForm: {
                companyName: '',
                companyAddress: '',
                contactName: '',
                contactPhone: '',
                applyDate: ''
            },
            rules: {
                companyName: [{ required: true, message: '请输入公司名称',  trigger: 'blur' }],
                companyAddress: [{ required: true, message: '请输入公司地址',  trigger: 'blur' }],
                contactPhone: [{ required: false, validator: this.isValidPhone,  trigger: 'blur' }]
            },
            isShowDialog: false,
            isFlag: false,
            url: '',
            method: ''
        };
    },
    watch: {
        value (val) {
            this.isShowDialog = val;
        },
        flag (val) {
            this.isFlag = val;
        },
        updateData (val) {
            if (val) {
                this.customerInfoForm = val;
            }
        }
    },
    methods: {
        // 验证手机号
        isValidPhone (rule, value, callback) {
            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
            if (value) {
                if (!reg.test(value)) {
                    callback('请输入正确的11位手机号码');
                } else {
                    callback();
                }
            } else {
                callback();
            }
        },
        openDialog () {},
        handleClose () {
            this.$emit('input', false);
            this.$refs.customerInfoRef.resetFields();
            this.customerInfoForm = {
                companyName: '',
                companyAddress: '',
                contactName: '',
                contactPhone: '',
                applyDate: ''
            };
        },
        handleConfirm () {
            this.$refs.customerInfoRef.validate(valid => {
                if (!valid) return;
                if (this.isFlag) {
                    // 新增
                    this.url = `${this.baseUrl}customer`;
                    this.method = 'post';
                } else {
                    // 编辑
                    this.url = `${this.baseUrl}customer/${this.customerInfoForm.rowId}`;
                    this.method = 'put';
                }
                this.$axios({
                    url: this.url,
                    method: this.method,
                    data: this.customerInfoForm
                }).then(res => {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.$emit('success');
                    this.handleClose();
                });
            });
        }
    }
};
</script>
<style>

</style>